<template>
	<view>
		<view class="swiper">
			<u-swiper :list="list" height="400"></u-swiper>
		</view>
		
		<view class="sto">
			<view class="stoname">
				{{stoDetail.name}}
			</view>
			<view class="stoaddress">
				门店地址：{{stoDetail.address}}
			</view>
			<view class="stotime">
				营业时间：08：00&nbsp-&nbsp21：00
			</view>
			<u-line color="blue" />
		</view>
		
		<view class="stocomment">
			<view class="comment-title">
				门店评价
			</view>
			<view class="comment-content">
				<view v-if="conmentList== ''" class="">
					<u-empty text="评论为空" mode="message"></u-empty>
				</view>
				<view class="comment-content" v-for="(item,index) in conmentList" :key="index">
					<view class="content-top">
						<view class="top-left">
							<u-avatar :src="avatar"></u-avatar>
						</view>
						<view class="top-right">
							<view class="">
								username
							</view>
							<view class="">
								{{item.createtime}}
							</view>
						</view>
						<view class="">
							<u-rate :count="count" v-model="item.rate" size="36" :disabled="true"></u-rate>
						</view>
					</view>
					<view class="content-cot">
						{{item.comment}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="footer-left">
				<u-button type="primary" shape="circle" @click="freeTell">{{stoDetail.mobile}}&nbsp&nbsp&nbsp立即拨打</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stoid: 1,
				stomobile: '',
				stoDetail: {},
				conmentList: [],
				count: 5,
				rate: 5,
				list: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad(item) {
			this.stoid = item.id
			console.log(item.id)
			this.getStoreDetails()
			this.getCommentList()
		},
		methods: {
			freeTell() {
				wx.makePhoneCall({
					phoneNumber: this.stomobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			getStoreDetails() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/hire/Hire/stodetail',
					method: 'POST',
					data: {
						stoid: this.stoid,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.stoDetail = res.data.data[0]
						this.stomobile = this.stoDetail.mobile
						console.log(this.stomobile)
					}
				})
			},
			getCommentList() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/Hire/stocomment',
					method: 'POST',
					data: {
						stoid: this.stoid
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.conmentList= res.data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.swiper {
	height: 400rpx;
}
.sto {
	width: 100%;
	height: auto;
	padding: 10px;
	.stoname {
		font-size: 25px;
		color: black;
		margin-left: 10px;
	}
	.stoaddress, .stotime {
		font-size: 20px;
		margin-left: 10px;
	}
}
.stocomment {
	width: 100%;
	padding: 10px;
	.comment-title {
		font-size: 20px;
	}
	.comment-content {
		.content-top {
			margin-top: 20rpx;
			display: flex;
			.top-right {
				margin-left: 10rpx;
				font-size: 16px;
			}
		}
		.content-cot {
			padding: 10rpx;
		}
	}
}
.footer {
	width: 100%;
	height: 60px;
	display: flex;
	flex-direction: row;
	position: fixed;
	bottom: 0;
	.footer-left {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background-color: #fff;	
	}
	
}
</style>
